<template>
  <div>
    <div class="flex items-center gap-4 mt-6">
      <img :src="rightIcon" class="w-6 h-5" />
      加减阻剂输送
    </div>
    <div class="mt-4">
      <el-radio-group v-model="JZType">
        <el-radio value="0" size="large">特性设置</el-radio>
        <el-radio value="1" size="large"> 减阻率设置</el-radio>
      </el-radio-group>
    </div>
    <div
      v-if="JZType === '0'"
      class="mt-4 w-[560px] h-[234px] bg_detail rounded-lg shadow flex flex-col items-center justify-between py-8 px-4 box-border"
    >
      <div class="w-full mt-4 text-base">
        <div class="flex h-[50px]">
          <div
            class="box-border flex items-center justify-center flex-1 text-center border bg_table_header"
          >
            注入油品
          </div>
          <div
            class="box-border flex items-center justify-center w-20 text-center topBorder bottomBorder rightBorder bg_table_header"
          >
            减阻剂特性参数A
          </div>
          <div
            class="box-border flex items-center justify-center w-20 text-center topBorder bottomBorder rightBorder bg_table_header"
          >
            减阻剂特性参数B
          </div>
          <div
            class="box-border flex items-center justify-center w-20 text-center topBorder bottomBorder rightBorder bg_table_header"
          >
            减阻剂特性参数N
          </div>
          <div
            class="box-border flex items-center justify-center w-20 text-center topBorder bottomBorder rightBorder bg_table_header"
          >
            注入浓度
          </div>
        </div>
        <div class="flex h-[40px] shadow-md">
          <div
            class="flex items-center justify-center flex-1 px-5 bottomBorder rightBorder leftBorder2"
          >
            {{ oilType1 }}
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="deblockingParameterA1" class="no-style-input !text-base" />
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="deblockingParameterB1" class="no-style-input !text-base" />
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="deblockingParameterN1" class="no-style-input !text-base" />
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="injectionConcentration1" class="no-style-input !text-base" />
          </div>
        </div>
        <div class="flex h-[40px] shadow-md">
          <div
            class="flex items-center justify-center flex-1 px-5 jus bottomBorder rightBorder leftBorder2"
          >
            {{ oilType2 }}
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="deblockingParameterA2" class="no-style-input !text-base" />
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="deblockingParameterB2" class="no-style-input !text-base" />
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="deblockingParameterN2" class="no-style-input !text-base" />
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="injectionConcentration2" class="no-style-input !text-base" />
          </div>
        </div>
      </div>
    </div>
    <div
      v-else
      class="mt-4 w-[560px] h-[234px] bg_detail rounded-lg shadow flex flex-col items-center justify-between py-8 px-4 box-border"
    >
      <div class="w-full mt-4 text-base">
        <div class="flex h-[50px]">
          <div
            class="box-border flex items-center justify-center flex-1 text-center border bg_table_header"
          >
            注入油品
          </div>
          <div
            class="box-border flex items-center justify-center w-20 text-center topBorder bottomBorder rightBorder bg_table_header"
          >
            减阻率
          </div>
        </div>
        <div class="flex h-[40px] shadow-md">
          <div
            class="flex items-center justify-center flex-1 px-5 bottomBorder rightBorder leftBorder2"
          >
            {{ oilType1 }}
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="deblockingRate1" class="no-style-input !text-base" />
          </div>
        </div>
        <div class="flex h-[40px] shadow-md">
          <div
            class="flex items-center justify-center flex-1 px-5 jus bottomBorder rightBorder leftBorder2"
          >
            {{ oilType2 }}
          </div>
          <div class="box-border flex items-center w-20 px-5 rightBorder bottomBorder">
            <el-input v-model="deblockingRate2" class="no-style-input !text-base" />
          </div>
        </div>
      </div>
    </div>
    <div class="mt-6">
      <div class="flex items-center mt-3">
        <span class="mr-10">运行后注入时刻</span
        ><el-input v-model="injectionTime2" class="!w-[250px] mr-4" /><span class="">小时</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import rightIcon from '@/assets/images/rightIcon.png'
const props = defineProps({
  oilType1: { type: String },
  oilType2: { type: String }
})

// 响应式数据
const JZType = ref('0')
const deblockingParameterA1 = ref('10')
const deblockingParameterB1 = ref('6')
const deblockingParameterN1 = ref('0')
const injectionConcentration1 = ref('20')

const deblockingParameterA2 = ref('10')
const deblockingParameterB2 = ref('6')
const deblockingParameterN2 = ref('0')
const injectionConcentration2 = ref('25')

const deblockingRate1 = ref('0.1')
const deblockingRate2 = ref('0.1')

const injectionTime2 = ref('5')

const validateSettings = () => {
  const draSeqFields =
    JZType.value === '0'
      ? [
          { value: deblockingParameterA1.value, name: '第一批次减阻剂特性参数A' },
          { value: deblockingParameterB1.value, name: '第一批次减阻剂特性参数B' },
          { value: injectionConcentration1.value, name: '第一批次注入浓度' },
          { value: deblockingParameterA2.value, name: '第二批次减阻剂特性参数A' },
          { value: deblockingParameterB2.value, name: '第二批次减阻剂特性参数B' },
          { value: deblockingParameterN1.value, name: '第二批次减阻剂特性参数N' },
          { value: deblockingParameterN2.value, name: '第二批次减阻剂特性参数N' },
          { value: injectionConcentration2.value, name: '第二批次注入浓度' },
          { value: injectionTime2.value, name: '运行后注入时刻' }
        ]
      : [
          { value: deblockingRate1.value, name: '第一批次减阻率' },
          { value: deblockingRate2.value, name: '第二批次减阻率' },
          { value: injectionTime2.value, name: '运行后注入时刻' }
        ]

  for (const field of draSeqFields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return false
    }
  }
  return true
}

const isFormValid = computed(() => {
  const draSeqFields =
    JZType.value === '0'
      ? [
          deblockingParameterA1.value,
          deblockingParameterB1.value,
          deblockingParameterN1.value,
          injectionConcentration1.value,
          deblockingParameterA2.value,
          deblockingParameterB2.value,
          deblockingParameterN2.value,
          injectionConcentration2.value,
          injectionTime2.value
        ]
      : [deblockingRate1.value, deblockingRate2.value, injectionTime2.value]
  if (!draSeqFields.every((field) => field)) return false

  return true
})

const getParamsData = () => {
  return JZType.value === '0'
    ? {
        method: JZType.value,
        A_1: deblockingParameterA1.value,
        A_2: deblockingParameterA2.value,
        B_1: deblockingParameterB1.value,
        B_2: deblockingParameterB2.value,
        N_1: deblockingParameterN1.value,
        N_2: deblockingParameterN2.value,
        C_1: injectionConcentration1.value,
        C_2: injectionConcentration2.value,
        T_dra: injectionTime2.value
      }
    : {
        method: JZType.value,
        a_1: deblockingRate1.value,
        a_2: deblockingRate2.value,
        T_dra: injectionTime2.value
      }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style lang="scss" scoped>
.leftBorder {
  border-left: 1px dashed black;
  border-image: repeating-linear-gradient(
      to bottom,
      black 0,
      black 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}
.border {
  border: 1px solid black;
}
.rightBorder {
  border-right: 1px solid black;
}
.bottomBorder {
  border-bottom: 1px solid black;
}
.topBorder {
  border-top: 1px solid black;
}
.leftBorder2 {
  border-left: 1px solid black;
}

.bottomDashBorder {
  border-bottom: 1px dashed rgba(53, 63, 64, 0.4);
  border-image: repeating-linear-gradient(
      to right,
      rgba(53, 63, 64, 0.4) 0,
      rgba(53, 63, 64, 0.4) 8px,
      transparent 8px,
      transparent 16px
    )
    1;
}

.shadow {
  box-shadow: 3px 3px 11px 0px rgba(0, 0, 0, 0.15);
}
:deep(.no-style-input) {
  .el-input__wrapper {
    background: none;
    box-shadow: none;
    padding: 0;
  }

  .el-input__inner {
    border: none;
    background: none;
  }
}

.line {
  background: linear-gradient(
    to right,
    rgba(53, 63, 64, 0),
    rgba(53, 63, 64, 1),
    rgba(53, 63, 64, 0)
  );
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bg_detail {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.bg_table_header {
}

.custom-button {
  background-color: rgba(69, 122, 178, 0.18);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid rgba(69, 122, 178, 1);
  border-radius: 6px;
  color: rgba(69, 122, 178, 0.8);
  width: 140px;
  height: 40px;

  cursor: pointer;
  &:hover {
    background-color: rgba(69, 122, 178, 1);
    border: 1px solid rgba(69, 122, 178, 1);
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}

.custom-button-not-active {
  cursor: not-allowed;
  background-color: rgba(128, 128, 128, 0.58);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 1px solid gray;
  border-radius: 6px;
  color: white;
  width: 140px;
  height: 40px;
  &:hover {
    background-color: gray;
    border: 1px solid gray;
    color: white;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
  }
}
</style>
